<template>
  <view class="video">
    <view class="item" v-for="(item, index) in videoList" :key="index">
      <video
        :title="item.video_title"
        :id="item._id"
        object-fit="fill"
        :src="item?.video_url"
      ></video>
      <text class="title">{{ item.video_title }}</text>
      <image
        class="img"
        @click="bofang(index, item._id)"
        v-if="item.play_but"
        src="../../static/other/video-bofang.png"
        mode="widthFix"
      ></image>
      <view class="bottom">
        <image class="avatar" :src="item.avatar" mode="widthFix"></image>
        <p class="p1">{{ item.name }}</p>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { videoResT } from "../../types/type";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
const page = ref<number>(0);
const videoList = ref<videoResT[]>([]);

const getList = async () => {
  const res: any = await api.video_list({ page: page.value });
  console.log(res);
  videoList.value.push(...res.data);
};
const bofang = (index: number, videoId: string) => {
  videoList.value.forEach((item, i) => {
    if (item._id !== videoId) {
      uni.createVideoContext(item._id).pause();
      videoList.value[i].play_but = true;
    } else {
      videoList.value[i].play_but = false;
    }
  });
  uni.createVideoContext(videoId).play();
};
onMounted(() => {
  getList();
});
onReachBottom(() => {
  page.value++;
  getList();
});
onPullDownRefresh(() => {
  page.value = 1;
  videoList.value = [];
  getList();
});
</script>

<style lang="scss" scoped>
.video {
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;

  .item {
    width: 100%;
    padding: 0 0 20rpx 0;
    box-sizing: border-box;
    background-color: #fff;
    margin: 20rpx 0;
    position: relative;

    video {
      width: 100%;
    }

    .title {
      color: #fff;
      font-weight: 600;
      position: absolute;
      top: 25rpx;
      left: 10rpx;
    }

    .img {
      width: 130rpx;
      position: absolute;
      top: 44%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .avatar {
      width: 50rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .bottom {
      display: flex;
      align-items: center;
    }
  }
}
</style>
